<template>
    <div>
        <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
            <v-tooltip :showTitle="false" dataKey="item*percent" />
            <v-axis />
            <v-legend dataKey="item" />
            <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig" />
            <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
        </v-chart>
    </div>
</template>
  
<script>
const DataSet = require('@antv/data-set');

const sourceData = [
    { item: 'GRI', count: 40 },
    { item: 'SDG', count: 21 },
    { item: 'SASB', count: 17 },
    { item: 'TCFD', count: 13 },
    { item: '其他', count: 9 }
];

const scale = [{
    dataKey: 'percent',
    min: 0,
    formatter: '.0%',
}];

const dv = new DataSet.View().source(sourceData);
dv.transform({
    type: 'percent',
    field: 'count',
    dimension: 'item',
    as: 'percent'
});
const data = dv.rows;

export default {
    data() {
        return {
            data,
            scale,
            height: 400,
            pieStyle: {
                stroke: "#fff",
                lineWidth: 1,
            },
            labelConfig: ['percent', {
                formatter: (val, item) => {
                    return item.point.item + ': ' + val;
                }
            }],
        };
    }
};
</script>